<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <el-button type="primary" @click="showEditDialog">编辑</el-button>
        </div>
      </template>

      <!-- 个人信息展示 -->
      <div class="profile-info">
        <div class="avatar-section">
          <el-avatar :size="100" :src="user.avatar" />
          <el-button type="primary" @click="handleAvatarUpload" class="upload-btn">
            <el-icon><Upload /></el-icon>
            上传头像
          </el-button>
        </div>

        <div class="info-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ user.department }}</el-descriptions-item>
            <el-descriptions-item label="职位">{{ user.position }}</el-descriptions-item>
            <el-descriptions-item label="入职日期">{{ user.joinDate }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <!-- 编辑个人信息对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑个人信息" width="50%">
      <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select v-model="editForm.department" placeholder="请选择部门">
            <el-option label="技术部" value="技术部"></el-option>
            <el-option label="产品部" value="产品部"></el-option>
            <el-option label="市场部" value="市场部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="editForm.position"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="passwordDialogVisible" title="修改密码" width="40%">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePasswordSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'

const editDialogVisible = ref(false)
const passwordDialogVisible = ref(false)

// 用户信息
const user = ref({
  username: '张三',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  email: 'zhangsan@example.com',
  phone: '13800138000',
  department: '技术部',
  position: '高级工程师',
  joinDate: '2025-01-01'
})

// 编辑表单
const editForm = reactive({
  username: user.value.username,
  email: user.value.email,
  phone: user.value.phone,
  department: user.value.department,
  position: user.value.position
})

const rules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

// 修改密码表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const editFormRef = ref(null)
const passwordFormRef = ref(null)

const showEditDialog = () => {
  editDialogVisible.value = true
}

const handleEditSubmit = () => {
  editFormRef.value.validate((valid) => {
    if (valid) {
      // 这里添加更新用户信息的逻辑
      ElMessage.success('个人信息更新成功')
      user.value = { ...editForm.value }
      editDialogVisible.value = false
    }
  })
}

const handlePasswordSubmit = () => {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      // 这里添加修改密码的逻辑
      ElMessage.success('密码修改成功')
      passwordDialogVisible.value = false
    }
  })
}

const handleAvatarUpload = () => {
  // 这里添加上传头像的逻辑
  ElMessage.success('头像上传功能暂未实现')
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.profile-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-info {
  padding: 20px;
}

.avatar-section {
  text-align: center;
  margin-bottom: 20px;
}

.upload-btn {
  margin-top: 15px;
}

.info-section {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
